<template>
   <div>
          <div  class="prevheader-style" >
            <span >【题型】：{{questionTypeHandler(previeList.questionType)}}</span>
            <span >【编号】：{{previeList.id}}</span>
            <span >【难度】：{{difficultyHandler(previeList.difficulty)}}</span>
            <span >【标签】：{{previeList.tags}}</span>
            <span >【学科】：{{previeList.subjectName}}</span>
            <span >【目录】：{{previeList.directoryName}}</span>
            <span >【方向】：{{previeList.direction}}</span>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>
            <p>【题干】: </p>
            <p style="color:blue">{{html2TextHandler(previeList.question)}}</p>
            <p >{{questionTypeHandler(previeList.questionType)}}题 选项：(以下选中的答案为正确答案)</p>
          </div>
          <div>
             <div  v-for="(item,index) in previeList.options" :key="index">
                 <el-checkbox v-model="item.isRight"  disabled :checked="Boolean(item.isRight)" >{{item.code}}.{{item.title}}</el-checkbox>
            </div>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>
            <div style="margin-bottom:20px">
              <span>【参考答案】：</span
              ><el-button class="el-button el-button--danger el-button--small"
              @click="showVideo=!showVideo"
                ><span>视频答案预览</span></el-button
              >
            </div>
            <div v-if="showVideo" class="video-style" ><video  :src="previeList.videoURL"  autoplay controls></video></div>
          </div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>【答案解析】: {{html2TextHandler(previeList.answer)}}</div>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <div>【题目备注】: {{previeList.remarks}}</div>
          <div style="text-align:right">
            <el-button class="el-button el-button--primary el-button--medium"
            @click="PreviewDiaVisible=false"
              >关闭</el-button
            >
          </div>
        </div>
</template>
<script>
import { html2Text } from '@/utils'
export default {
  name: '',
  data () {
    return {
      previeList: {},
      showVideo: false // 是否预览视频答案
    }
  },
  created () {},
  computed: {},
  methods: {
    guan () {
      // console.log(this, 55566565)
      this.$emit('bi')
    },
    // ◆定义HTML 转 text 的函数(题干函数)
    html2TextHandler (html) {
      return html2Text(html)
    },
    // ◆封装试题类型转化函数
    questionTypeHandler (num) {
      if (Number(num) === 1) {
        return '单选'
      } else if (Number(num) === 2) {
        return '多选'
      } else if (Number(num) === 3) {
        return '简答'
      }
    },
    // ◆封装试题难度转化函数
    difficultyHandler (num) {
      if (Number(num) === 1) {
        return '简单'
      } else if (Number(num) === 2) {
        return '一般'
      } else if (Number(num) === 3) {
        return '困难'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 预览区域
.prevheader-style {
  display: flex;
  flex-wrap: wrap;
  span {
    width: 25%;
    margin-right: 15px;
  }
}

.prevfooter-style {
  margin-top: 5px;
  text-align: right;
}
</style>
